import React from 'react';
import { connect } from 'react-redux';
import { Table, message, Icon, Spin } from 'antd';
import * as routerActions from 'react-router-redux';
import Api from 'Utils/api';
import { ALERT_LEVEL, BUSINESS_TYPE } from 'Constants/AlertTableFilter';
import CommonBg from 'Page/DispatchPage/Components/CommonBorder';

const PAGE_SIZE = 7;
class DefinedDispatch extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      totalCount: 4,
      currentPage: 1,
      data: [],
      businessType: '',
      level: '',
      isLoading: true
    };
    this.onDetail = ::this.onDetail;
    this.initData = ::this.initData;
  }
  componentDidMount() {
    this.initData();
  }
  initData() {
    this.setState({ isLoading: true });
    const { currentPage, businessType, level } = this.state;
    const query = {};
    query.limit = PAGE_SIZE;
    query.offset = (currentPage - 1) * PAGE_SIZE;
    if (businessType) { query.category = businessType; }
    if (level) { query.level = level; }
    const api = new Api({
      method: 'GET',
      path: '/warning/enterprise/result',
      query,
      success: (res) => {
        this.setState({
          data: res.data_list,
          totalCount: res.total_count,
          isLoading: false
        });
      },
      error: (msg) => {
        message.error(msg);
        this.setState({ isLoading: false });
      }
    });
    api.run();
  }
  showAlert(text) {
    if (text === 3) {
      return {
        color: '#FF0000',
        label: '告警',
      };
    }
    if (text === 2) {
      return {
        color: '#FF5400',
        label: '警示',
      };
    }
    return {
      color: '#FFE218',
      label: '预警'
    };
  }
  onDetail(id) {
    this.props.dispatch(routerActions.push(`/system/dispatch/support/important_supervise/detail/${id}`));
  }
  generatorColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '区域',
        dataIndex: 'gov_name',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '企业类型',
        dataIndex: 'category',
        filters: BUSINESS_TYPE,
        filterIcon: <Icon type="caret-down" />,
        filterMultiple: false,
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '企业名单',
        dataIndex: 'name',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '预警等级',
        dataIndex: 'level',
        filters: ALERT_LEVEL,
        filterIcon: <Icon type="caret-down" />,
        filterMultiple: false,
        render: (text) => {
          const item = this.showAlert(text);
          return <span style={{ color: item.color }} >{item.label}</span>;
        }
      },
      {
        title: '操作',
        dataIndex: 'operate',
        render: (text, record) => (
          <span className="operate">
            <span className="see" onClick={this.onDetail.bind(this, record.id)}>查看详情</span >
          </span>
        )
      }
    ];
  }
  handleTableChange(pagination, filters) {
    this.setState({
      currentPage: pagination.current,
      businessType: filters.category && filters.category.length > 0 ? filters.category[0] : '',
      level: filters.level && filters.level.length > 0 ? parseInt(filters.level[0], 10) : ''
    }, () => { this.initData(); });
  }
  render() {
    const columns = this.generatorColumns();
    return (
      <CommonBg
        content={
          <Spin size="large" spinning={this.state.isLoading} tip="加载中...">
            <Table
              rowKey={record => record.id}
              columns={columns}
              bordered
              dataSource={this.state.data}
              onChange={this.handleTableChange.bind(this)}
              pagination={{
                pageSize: PAGE_SIZE,
                total: this.state.totalCount,
                current: this.state.currentPage,
                //onChange: this.onListPageChange.bind(this)
              }}
            />
          </Spin>
        }
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing
  };
}

export default connect(mapStateToProps)(DefinedDispatch);
